##
description = "Default HTML Layout"

==
<?

function onEnd()
{
    // Main Category Query
    $config = $this['options'];
    $limit = isset($config['widget_category_count'])? intval($config['widget_category_count']): 12;
    $categories = RainLab\Blog\Models\Category::withCount('posts')
        ->where('parent_id','=',  NULL)
        ->orderBy('posts_count', 'DESC')
        ->limit($limit);
        
    $this['widget_categories'] = $categories->get()->all();

    $tag = RainLab\Blog\Models\Tag::withCount('posts')
        ->where('promote','=',  1)
        ->orderBy('posts_count', 'DESC')
        ->limit($limit)
        ->get()->all();

    $this['recommend_posts'] = $tag[0]['posts'];

    $randPosts = RainLab\Blog\Models\Post::inRandomOrder()->limit(4)->get();

    $this['recommend_posts'] = $randPosts;
}
?>

==
<!DOCTYPE html>
<html>
    <head>
        {% partial 'site/meta' %}

        <link href="{{ 'assets/css/libs.min.css'|theme }}" rel="stylesheet">
        <link href="{{ 'assets/css/main.css'|theme }}" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swap" rel="stylesheet">

        {% styles %}
    </head>
    <body class="page-home">

        <!-- Header -->
        <header id="layout-header">
            {% partial 'site/header' %}
        </header>

        <!-- Content -->
        <div class="page-wrapper">
            {% partial 'site/logo' %}
            <div class="page-content">
                 {% partial 'site/silder' %}
                <main class="page-main">
                    <ul class="uk-breadcrumb">
                        <li><a href="/"><span data-uk-icon="chevron-left"></span><span>返回首页</span></a></li>
                        <li><span>{{ post.title }}</span></li>
                    </ul>
                    <h3 class="uk-text-lead">{{ post.title }}</h3>
                    <div class="uk-grid uk-grid-small" data-uk-grid>
                        
                        <div class="uk-width-1-4@s">
                            <div class="game-profile-card">
                                <div class="game-profile-card__media">
                                    {% if post.featured_images or post.content_images  %}
                                        {% if post.content_images | length > 0 %}
                                            <img src="{{ post.content_images.0.getPath() }}" alt="{{ post.title }}" />
                                        {% else %}
                                        <img src="{{ post.featured_images.0.getPath() }}" alt="{{ post.title }}" />
                                        {% endif %}
                                    {% endif %}

                                </div>
                                <div class="game-profile-card__intro"><span>{{ post.excerpt }}</span></div>
                                <ul class="game-profile-card__list">
                                    <li>
                                        <div>热度:</div>
                                        <div class="game-card__rating">{{ post.view_count}}</div>
                                    </li>

                                    <li>
                                        <div>发布日期:</div>
                                        <div>{{ post.published_at | date('Y-m-d') }}</div>
                                    </li>
                                </ul>
                                <ul class="game-profile-card__type">
                                    {% for category in post.categories %}
                                    <li><span>{{ category.name }}</span></li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="game-profile-price">
                                <a href="{{ post.source_url}}" target="_blank" class="uk-button uk-button-danger uk-width-1-1" type="button"><span class="ico_store"></span><span>访 问</span></a><a href="#modal-report" data-uk-toggle class="uk-button uk-button-primary uk-width-1-1" type="button"><span class="ico_help"></span><span>反馈</span></a>
                            </div>
                        </div>

                        <div class="uk-width-3-4@s">
                            <div class="gallery">
                                {{ post.content_html | raw }}
                            </div>
                        </div>

                    </div>

                    <div class="uk-width-1-1@xl uk-grid-margin uk-first-column">
                        <div class="widjet --friend-requests">
                            <div class="widjet__head">
                                <h3 class="uk-text-lead">更多AI工具</h3>
                            </div>
                            <div class="widjet__body">
                                <ul class="js-filter uk-grid-small uk-child-width-1-1 uk-child-width-1-4@xl uk-child-width-1-2@l uk-child-width-1-2@m uk-child-width-1-2@s" data-uk-grid>
                                    {% for item in recommend_posts %}
                                    <li data-type="{{ item.categories[0].id|default('') }}">
                                        <div class="game-card --horizontal --small">
                                            <div class="game-card__box">
                                                <div class="game-card__media"><a href="/blog/post/{{ item.slug }}"><img src="{{ item.featured_images[0].path | default('') }}" alt="{{ item.name | default(item.slug | title) }}" /></a></div>
                                                <div class="game-card__info"><a class="game-card__title" href="/blog/post/{{ item.slug }}"> {{ item.title | default(item.slug | title) }}</a>
                                                    <div class="game-card__discussion">{{ item.excerpt | default(item.title | title) }}</div>
                                                </div>
                                                
                                            </div>
                                        </div>

                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    </div>


                    <!-- Footer -->
                    <footer id="layout-footer">
                        {% partial 'site/footer' %}
                    </footer>
                </main>
            </div>
        </div>

        {% partial 'site/support' %}


        <!-- Scripts -->
        <script src="{{ 'assets/js/libs.js'|theme }}"></script>
        <script src="{{ 'assets/js/main.js'|theme }}"></script>

        {% snowboard all %}
        {% scripts %}
        {% partial 'site/scripts' %}

    </body>
</html>
